CSS @propertyì ëí ì¢ í© ê°ìŽë. ì¹ ëììžì í¥ììí€êž° ìíŽ ì¬ì©ì ì ì ìì±ì ì ìíê³ ì ëë©ìŽì ì ì ì©íë êž°ë¥ì íìí©ëë€.
CSS @property: ì¬ì©ì ì ì ìì±ì íì ë°ííìžì
CSS ì¬ì©ì ì ì ìì±(CSS ë³ìëŒê³ ë íš)ì ì°ëŠ¬ê° CSS륌 ìì±íê³ êŽëЬíë ë°©ìì íì ì ê°ì žììµëë€. ìŽë¥Œ íµíŽ ì€íìŒìíž ì 첎ì ì ì©í ì ìë ì¬ì¬ì© ê°ë¥í ê°ì ì ìíì¬ ìœëì ì ì§ë³Žìì±ê³Œ ì
ë°ìŽíž ì©ìŽì±ì ëìŒ ì ììµëë€. íì§ë§ ëšìí ê° ë첎륌 ëìŽ ì¬ì©ì ì ì ìì±ì ì í, 구묞, ìŽêž°ê°, ìì ëìì ì ìí ì ìë€ë©Ž ìŽëšê¹ì? ë°ë¡ ìŽë @propertyê° ë±ì¥í©ëë€. ìŽ ê°ìŽëììë @property at-ruleì ê°ë ¥íšê³Œ ì ì¬ë ¥ì íìíì¬ ì¬ë¬ë¶ì íë¡ì ížìì ìŽë¥Œ íì©í ì ìë ì§ì곌 ìì 륌 ì ê³µí ê²ì
ëë€.
CSS @propertyë 묎ììžê°?
@property at-ruleì ì¬ì©ì ì ì ìì±ì ëª
ìì ìŒë¡ ì ìí ì ìê² íŽì£Œë ê°ë ¥í CSS ì¶ê° êž°ë¥ì
ëë€. 볞ì§ì ìŒë¡ 묞ììŽë¡ ì·šêžëë íì€ CSS ë³ìì ë¬ëЬ, @property륌 ì¬ì©í멎 ë°ìŽí° ì í, 구묞, ìŽêž°ê°ì ì§ì íê³ ìì±ìŽ ë¶ëªš ììë¡ë¶í° ê°ì ììíëì§ ì¬ë¶ë¥Œ ì§ì í ì ììµëë€. ìŽë ì ëë©ìŽì
, ì íšì± ê²ì¬ ë° ì¬ì©ì ì ì ìì±ì ëí ì ë°ì ìž ì ìŽì ììŽ í¥ë¯žë¡ìŽ ê°ë¥ì±ì ìŽìŽì€ëë€.
볞ì§ì ìŒë¡, @propertyë CSS ë³ìì ìŽë¥ë ¥ì ë¶ì¬í©ëë€.
@property륌 ì¬ì©íë ìŽì ë 묎ììžê°?
íì€ CSS ë³ìë ë§€ì° ì ì©íì§ë§ íê³ê° ììµëë€. @propertyê° ë¹ì ë°íë ë€ì ìë늬ì€ë¥Œ ê³ ë €íŽ ë³Žìžì:
- ì ëë©ìŽì
ë° ì í: 묞ììŽë¡ ì·šêžëë íì€ CSS ë³ìë ìë¡ ë€ë¥ž ì íì ê°(ì: ì«ììì ìììŒë¡) ì¬ìŽìì ë¶ëëœê² ì ëë©ìŽì
ë ì ììµëë€.
@property륌 ì¬ì©í멎 ë³ìì ì íì ì ìíì¬ ë¶ëë¬ìŽ ì í곌 ì ëë©ìŽì ì ê°ë¥íê² í ì ììµëë€. ììì ì조륌 ëíëŽë ì¬ì©ì ì ì ìì±ì ì ëë©ìŽì íë€ê³ ììíŽ ë³Žìžì. íì€ CSS ë³ìë¡ë ìë°ì€í¬ëŠœíž íµìŽ íìíê² ì§ë§,@property륌 ì¬ì©íê³ êµ¬ë¬žì<color>ë¡ ì ìí멎 ëžëŒì°ì ê° êž°ë³žì ìŒë¡ ì ëë©ìŽì ì ì²ëЬí ì ììµëë€. - ì í ì íšì± ê²ì¬: ì¬ì©ì ì ì ìì±ìŽ í¹ì ì í(ì:
<number>,<color>,<length>)ì ê°ë§ íì©íëë¡ í ì ììµëë€. ìŽë ì€ë¥ë¥Œ ë°©ì§íê³ CSSì ê²¬ê³ ì±ì ëìŽë ë° ëììŽ ë©ëë€. ì íšíì§ ìì ê°ì í ë¹íë €ê³ í멎 ëžëŒì°ì ë ì ìë ìŽêž°ê°ì ì¬ì©í©ëë€. ìŽë ê°ë° íë°ì ë°ìí ì ìë ì ì¬ì ì€ë¥ì ì졎íë ê²ë³Žë€ íšì¬ ì 뢰í ì ììµëë€. - êž°ë³žê° ë° ìì:
@property륌 ì¬ì©í멎 ìì±ì ìŽêž°ê°ì ì§ì íê³ ìì ëìì ì ìŽí ì ììµëë€. ìŽë CSS륌 ëšìííê³ ììž¡ ê°ë¥íê² ë§ëëë€. ëª íí ìŽêž°ê°ì ì ìíë ê²ì ë³µì¡í íë¡ì ížìì íìì ìŽë©°, ì¬ì©ì ì ì ìì±ìŽ ëª ìì ìŒë¡ ì€ì ëì§ ììì ë ìëíì§ ìì ìê°ì ê²°íšì ë°©ì§í©ëë€. - CSS ê°ë
ì± ë° ì ì§ë³Žìì± í¥ì:
@propertyë¡ ì¬ì©ì ì ì ìì±ì ëª ìì ìŒë¡ ì ìí멎 í¹í ëê·ëªš íë¡ì ížìì CSS륌 ë ìœê² ìŽíŽíê³ ì ì§ë³Žìí ì ììµëë€. ìŽë ì첎 묞ìí ìí ì íì¬ ì¬ì©ì ì ì ìì±ìŽ ë¬Žìì ìí ê²ìŽê³ ìŽë»ê² ì¬ì©ëìŽìŒ íëì§ë¥Œ ëª ííê² í©ëë€.
@property 구묞
@property at-ruleì ë€ìì Ʞ볞 구묞ì ë°ëŠ
ëë€:
@property --property-name {
syntax: <value>;
inherits: <boolean>;
initial-value: <value>;
}
구묞ì ê° ë¶ë¶ì ë¶ìíŽ ë³Žê² ìµëë€:
--property-name: ì¬ì©ì ì ì ìì±ì ìŽëŠì ëë€. ë ê°ì íìŽí(--)ìŒë¡ ììíŽìŒ í©ëë€. ì륌 ë€ìŽ,--primary-color.syntax: ìì±ìŽ íì©í ì ìë ê°ì ì íì ì ìí©ëë€.<color>,<number>,<length>,<percentage>,<url>,<integer>ë±ê³Œ ê°ì CSS<value>ì í곌 ëìŒí 구묞ì ì¬ì©í©ëë€. ììŒë칎ë*륌 ì¬ì©íì¬ ëªšë ê°ì íì©í ìë ììµëë€.inherits: ìì±ìŽ ë¶ëªš ììë¡ë¶í° ê°ì ììíëì§ ì¬ë¶ë¥Œ ê²°ì íë ë¶ëŠ¬ìž ê°ì ëë€.trueëëfalseê° ë ì ììµëë€.initial-value: ìì±ì Ʞ볞ê°ì ëë€. ì§ì ë 구묞ì ë°ë¥ž ì íší ê°ìŽìŽìŒ í©ëë€.
@propertyì ì€ì ìì
@property륌 ì¬ì©íì¬ CSS륌 í¥ììí€ë ëª ê°ì§ ì€ì ìì 륌 ìŽíŽë³Žê² ìµëë€.
ìì 1: ìì ì ëë©ìŽì
ë²íŒì 배겜ìì ì ëë©ìŽì
íê³ ì¶ë€ê³ ììíŽ ë³Žìžì. íì€ CSS ë³ìë¡ë ê¹ë€ë¡ìž ì ìì§ë§, @property륌 ì¬ì©í멎 ê°ëší©ëë€:
@property --button-bg-color {
syntax: <color>;
inherits: false;
initial-value: #007bff;
}
.button {
background-color: var(--button-bg-color);
transition: --button-bg-color 0.3s ease;
}
.button:hover {
--button-bg-color: #28a745;
}
ìŽ ìì ììë --button-bg-colorëŒë ì¬ì©ì ì ì ìì±ì <color> 구묞ìŒë¡ ì ìí©ëë€. ìŽë ëžëŒì°ì ì íŽë¹ ìì±ìŽ íì ìì ê°ìŽìŽìŒ íšì ìë €ì€ëë€. ë²íŒì ë§ì°ì€ë¥Œ ì¬ëŠ¬ë©Ž ìììŽ ìŽêž° íëì(#007bff)ìì ë
¹ì(#28a745)ìŒë¡ ë¶ëëœê² ì íë©ëë€.
ìì 2: ì«ì ì ëë©ìŽì
ì§íë¥ íìì€ì ëë¹ë¥Œ ì ëë©ìŽì
íê³ ì¶ë€ê³ ê°ì íŽ ëŽ
ìë€. @property륌 ì¬ì©í멎 ë€ì곌 ê°ìŽ í ì ììµëë€:
@property --progress-width {
syntax: <percentage>;
inherits: false;
initial-value: 0%;
}
.progress-bar {
width: var(--progress-width);
height: 10px;
background-color: #4CAF50;
transition: --progress-width 0.5s ease-in-out;
}
.progress-bar.complete {
--progress-width: 100%;
}
ì¬êž°ìë --progress-widthëŒë ì¬ì©ì ì ì ìì±ì <percentage> 구묞ìŒë¡ ì ìí©ëë€. ìŽêž°ê°ì 0%ë¡ ì€ì ë©ëë€. .complete íŽëì€ê° ì§íë¥ íìì€ì ì¶ê°ë멎 ëë¹ê° 100%ë¡ ë¶ëëœê² ì ëë©ìŽì
ë©ëë€.
ìì 3: êžžìŽ ê° ì íšì± ê²ì¬
@property륌 ì¬ì©íì¬ ì¬ì©ì ì ì ìì±ìŽ êžžìŽ ê°ë§ íì©íëë¡ í ì ììµëë€:
@property --spacing {
syntax: <length>;
inherits: true;
initial-value: 10px;
}
.element {
margin: var(--spacing);
}
.element.large {
--spacing: 20px; /* Valid */
}
.element.invalid {
--spacing: red; /* Invalid - will revert to initial-value */
}
ìŽ ê²œì°, --spacingì <length> 구묞ìŒë¡ ì ìë©ëë€. êžžìŽ ê°ìŽ ìë ê°(ì: red)ì í ë¹íë €ê³ í멎 ëžëŒì°ì ë ìŽë¥Œ 묎ìíê³ ìŽêž°ê°(10px)ì ì¬ì©í©ëë€.
ìì 4: ì¬ì©ì ì ì 귞늌ì ì ì
구묞 ììŒë칎ë륌 ì¬ì©íì¬ box-shadowì ê°ì ë³µì¡í ìì±ì ì ìí ì ììµëë€. ëšì ì ì í ì íšì± ê²ì¬ê° ìœíëë¯ë¡ ì¬ë°ë¥ž 구묞곌 구조륌 ë°ë¥Žëì§ íìžíŽìŒ íë€ë ê²ì ëë€.
@property --my-shadow {
syntax: *;
inherits: false;
initial-value: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.shadow-box {
box-shadow: var(--my-shadow);
}
.shadow-box:hover {
--my-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2);
transition: --my-shadow 0.3s ease;
}
ì ìžê³ì ê³ ë €ì¬í ë° ëªšë² ì¬ë¡
ì ìžê³ ì¬ì©ì륌 ëììŒë¡ íë íë¡ì ížìì @property륌 ì¬ì©í ë ë€ì ê³ ë €ì¬íì ëª
ì¬íìžì:
- ì ê·Œì±:
@propertyë¡ ìì±ë 몚ë ì ëë©ìŽì ìŽë ì íìŽ ì¥ì ê° ìë ì¬ì©ììê² ì ê·Œì± ë¬žì 륌 ìŒìŒí€ì§ ìëë¡ íìžì. íìí ê²œì° ì ëë©ìŽì ì ë¹íì±íí ì ìë ìµì ì ì ê³µíìžì. ì ìžê³ ì¬ë¬ ì§ìì ì¬ì©ìë ìží°ë· ì°ê²° ìì€ê³Œ íëìšìŽ ì±ë¥ìŽ ë€ë¥Œ ì ììì êž°ìµíìžì. ì ì¬ì êž°êž°ìì ì±ë¥ì ë¶ì ì ìž ìí¥ì ì€ ì ìë ì§ëì¹ê² ë³µì¡í ì ëë©ìŽì ì íŒíìžì. - êµì í(i18n) ë° íì§í(l10n): ì¬ì©ì ì ì ìì±ìŽ ë€ë¥ž ìžìŽ ë° ë¬žíì ë§¥ëœê³Œ ìŽë»ê² ìíž ìì©í ì§ ê³ ë €íìžì. ë ìŽìììŽë íìŽí¬ê·žëíŒë¥Œ ì ìŽíêž° ìíŽ ì¬ì©ì ì ì ìì±ì ì¬ì©íë 겜ì°, ëììžìŽ ë€ë¥ž í ì€íž ë°©í¥ê³Œ 묞ì ì§í©ì ì ì íê² ì ìíëì§ íìžíìžì. ì륌 ë€ìŽ, ì§íë¥ íìì€ì í ì€íž ë°©í¥ì ì€ë¥žìªœìì ìŒìªœìŒë¡ ì°ë(RTL) ìžìŽìì ë³ê²œëìŽìŒ í ì ììµëë€.
- ì±ë¥:
@propertyê° ë€ìŽí°ëž CSS ì ëë©ìŽì ì íì±ííì¬ ì±ë¥ì í¥ììí¬ ì ìì§ë§, ìœë륌 ìµì ííë ê²ì ì¬ì í ì€ìí©ëë€. íìŽì§ ìë륌 ì íìí¬ ì ìë ë¶íìí ê³ì°ìŽë ë³µì¡í ì ëë©ìŽì ì íŒíìžì. ë€ìí êž°êž°ì ëžëŒì°ì ìì ìœë륌 í ì€ížíì¬ ì¬ë¬ íë«íŒìì ì ìëíëì§ íìžíìžì. - ëžëŒì°ì ížíì±: íë¡ëì
í겜ìì
@property륌 ì¬ì©íêž° ì ì ëžëŒì°ì ížíì±ì íìžíìžì. ì§ììŽ í¬ê² ê°ì ëìì§ë§, ìŽ êž°ë¥ì ì§ìíì§ ìë 구í ëžëŒì°ì ìì ìœëê° ì ìì ìŒë¡ ë첎(degrades gracefully)ëëì§ íìžíë ê²ìŽ ì€ìí©ëë€. íìí ê²œì° êž°ë¥ ì¿ŒëŠ¬(@supports)륌 ì¬ì©íì¬ ë첎 ì€íìŒì ì ê³µíìžì. 2024ë ë§ íì¬, 몚ë 죌ì ëžëŒì°ì ìì ìŽ êž°ë¥ì ì§ìíì¬ ëžëŒì°ì ì§ììŽ ë§€ì° ì¢ìµëë€. - ìŽëŠ ì§ì ê·ì¹: ì¬ì©ì ì ì ìì±ì ëíŽ ëª
ííê³ ìŒêŽë ìŽëŠ ì§ì ê·ì¹ì ì±ííìžì. ìŽë ê² í멎 í¹í íìŒë¡ ìì
í ë ìœë륌 ë ìœê² ìŽíŽíê³ ì ì§ë³Žìí ì ììµëë€. ìì±ì 목ì ì ëª
ííê² ëíëŽë ì€ëª
ì ìž ìŽëŠì ì¬ì©íìžì. ì륌 ë€ìŽ,
--colorëì--primary-button-color륌 ì¬ì©íìžì. - 묞ìí: í¹í ëê·ëªš íë¡ì ížë í곌 íšê» ìì í ë ì¬ì©ì ì ì ìì±ì ì² ì í 묞ìííìžì. ê° ìì±ì 목ì , 구묞, ìŽêž°ê° ë° ë€ë¥ž ìì±ê³Œì ì¢ ìì± ëë ìíž ìì©ì ì€ëª íìžì. ìŽë ë€ë¥ž ê°ë°ìë€ìŽ ìœë륌 íšê³Œì ìŒë¡ ìŽíŽíê³ ì¬ì©íë ë° ëììŽ ë ê²ì ëë€.
- í
ë§ ë° ëžëë©:
@property륌 ì¬ì©íì¬ ì¹ì¬ìŽížë ì í늬ìŒìŽì ì ìí ì ì°íê³ ì¬ì©ì ì ì ê°ë¥í í ë§ë¥Œ ë§ëìžì. ìì, êžêŒŽ, ê°ê²© ë° êž°í ëììž ììì ëí ì¬ì©ì ì ì ìì±ì ì ìíê³ , ì¬ì©ìê° ìŽë¬í ìì±ì ìì íì¬ ë€ë¥ž í ë§ ê°ì ìœê² ì íí ì ìëë¡ íìžì. ìŽë ë€ë¥ž ì§ì곌 ìžìŽì ê±žì³ ìŒêŽì±ì ì ì§íŽìŒ íë êžë¡ë² ëžëë륌 ê°ì§ ì¡°ì§ì í¹í ì ì©í ì ììµëë€.
@property ì¬ì©ì ìí ëªšë² ì¬ë¡
@property륌 ì¬ì©í ë ë°ëŒìŒ í ëª ê°ì§ ëªšë² ì¬ë¡ë ë€ì곌 ê°ìµëë€:
- ëª
ìì ìŒë¡ ìì±íêž°: ììì ìž ë¬žììŽ êž°ë° ë³ìì ì졎íë ëì íì
@propertyë¡ ì¬ì©ì ì ì ìì±ì ì ìíìžì. ìŽë ëª íì±, ì íšì± ê²ì¬ ë° ì ëë©ìŽì êž°ë¥ì ì ê³µí©ëë€. - ì¬ë°ë¥ž 구묞 ì ííêž°: ì í ìì ì±ê³Œ ì ì í ì ëë©ìŽì ëìì 볎ì¥íêž° ìíŽ ê° ìì±ì ê°ì¥ ì í©í 구묞ì ì ííìžì.
- ìŽêž°ê° ì ê³µíêž°: íì ì¬ì©ì ì ì ìì±ì ìŽêž°ê°ì ì€ì íìžì. ìŽë ìì±ìŽ ëª ìì ìŒë¡ ì€ì ëì§ ìì ê²œì° ìêž°ì¹ ìì ëìì ë°©ì§í©ëë€.
- ìì ê³ ë €íêž°: ìì±ìŽ ë¶ëªš ììë¡ë¶í° ê°ì ììíŽìŒ íëì§ ì ì€íê² ê³ ë €íìžì. ì ì í ë
inherits: true륌 ì¬ì©íë, ì ì¬ì ìž ë¶ìì©ì ì ìíìžì. - ì믞 ìë ìŽëŠ ì¬ì©íêž°: ìœë륌 ë ìœê² ìŽíŽíê³ ì ì§ë³Žìí ì ìëë¡ ì¬ì©ì ì ì ìì±ì ì€ëª ì ìž ìŽëŠì ì ííìžì.
- ìœë 묞ìííêž°: CSSì 죌ìì ì¶ê°íì¬ ê° ì¬ì©ì ì ì ìì±ì 목ì 곌 ì¬ì© ë°©ë²ì ì€ëª íìžì.
- ì² ì í í ì€ížíêž°: ížíì±ê³Œ ì±ë¥ì 볎ì¥íêž° ìíŽ ë€ìí ëžëŒì°ì ì êž°êž°ìì ìœë륌 í ì€ížíìžì.
ëžëŒì°ì ížíì±
2024ë
ë§ íì¬, @propertyë Chrome, Firefox, Safari, Edge륌 í¬íší 몚ë 죌ì ëžëŒì°ì ìì ì§ìë©ëë€. ê·žë¬ë íë¡ëì
í겜ìì @property륌 ì¬ì©íêž° ì ì Can I useì ê°ì 늬ìì€ìì ìµì ëžëŒì°ì ížíì± ì 볎륌 íìžíë ê²ìŽ íì ì¢ì ìê°ì
ëë€.
@property륌 ì§ìíì§ ìë 구í ëžëŒì°ì ì 겜ì°, êž°ë¥ ì¿ŒëŠ¬(@supports)륌 ì¬ì©íì¬ ë첎 ì€íìŒì ì ê³µí ì ììµëë€. ì륌 ë€ìŽ:
@supports (--custom-property: initial) {
/* Styles for browsers that support custom properties */
}
@supports not (--custom-property: initial) {
/* Fallback styles for older browsers */
}
ê²°ë¡
CSS @propertyë CSS ìì
íëŠì í¬ê² í¥ììí¬ ì ìë ê°ë ¥í ë구ì
ëë€. ì¬ì©ì ì ì ìì±ì ì í, 구묞, ìŽêž°ê° ë° ìì ëìì ì ìí ì ìê² íšìŒë¡ìš ì ëë©ìŽì
, ì íšì± ê²ì¬ ë° ì€íìŒì ëí ì ë°ì ìž ì ìŽì ëí ìë¡ìŽ ê°ë¥ì±ì ìŽìŽì€ëë€. ê·ž 구묞, êž°ë¥ ë° ëªšë² ì¬ë¡ë¥Œ ìŽíŽíšìŒë¡ìš @property륌 íì©íì¬ ë ê²¬ê³ íê³ ì ì§ë³Žìíêž° ì¬ì°ë©° ìê°ì ìŒë¡ ë§€ë ¥ì ìž ì¹ ëììžì ë§ë€ ì ììµëë€. @property륌 ì¬ì©í ëë ì ìžê³ì ìž ìí¥ì ê³ ë €íì¬ ë€ìí ì¬ì©ì륌 ìí ì ê·Œì±, êµì í ë° ì±ë¥ì 볎ì¥íë ê²ì ìì§ ë§ìžì.
ê·žë¬ë, @propertyì íì ë°ìë€ì¬ ë€ì íë¡ì ížìì CSS ì¬ì©ì ì ì ìì±ì 몚ë ì ì¬ë ¥ì ë°ííŽ ë³Žìžì!